import React, { Component } from 'react'
import { Breadcrumb, Form, Input, Button } from 'antd'
import './changepwd.less'

const FormItem = Form.Item

export default class ChangePWD extends Component {
  constructor(props) {
    super(props)
    this.displayName = 'ChangePWD'
    this.state = {}
  }
  render() {
    const formLayout = 'horizontal'
    const formItemLayout = formLayout === 'horizontal' ? {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 }
    } : null
    const buttonItemLayout = formLayout === 'horizontal' ? {
      wrapperCol: { span: 14, offset: 4 }
    } : null
    return <div className="tederen-changepwd">
      <div className="tederen-breadcrumb-container">
        <Breadcrumb separator=">">
          <Breadcrumb.Item><a className="tederen-breadcrumb-title" >修改密码</a></Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div>
        <Form layout={ formLayout }>
          <FormItem
            label="旧密码"
            {...formItemLayout}
          >
            <Input placeholder="" type="password"/>
          </FormItem>
          <FormItem
            label="新密码"
            {...formItemLayout}
          >
            <Input placeholder="" type="password"/>
          </FormItem>
          <FormItem
            label="重复新密码"
            {...formItemLayout}
          >
            <Input placeholder="" type="password"/>
          </FormItem>
          <FormItem {...buttonItemLayout}>
            <Button type="primary" size="large">提交</Button>
          </FormItem>
        </Form>
      </div>
    </div>
  }
}
